<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学院学生信息一览图</title>
    <!-- Vue.js, Axios, and Highcharts libraries -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/area.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body style="background-color: #fafafa;">
<div id="app">
    <!-- 图表区域 -->
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <div class="t_main_narrow">
            <div id="scatterChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_narrow">
            <div id="lineChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_narrow">
            <div id="areaChart" style="width: 100%; height: 300px;"></div>
        </div>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <div class="t_main_wide">
            <div id="pieChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_wide">
            <div id="comboChart" style="width: 100%; height: 300px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            allUser: 0
        },
        created: function () {
            this.loadUserData();
        },
        methods: {
            loadUserData() {
                var that = this;
                axios.post('http://localhost:8080/api/user-count/user-number')
                    .then(function (res) {
                        if (res.data.code === 1) {
                            that.allUser = res.data.data.allUser;
                        } else {
                            window.alert(res.data.msg);
                        }
                    })
                    .catch(function (err) {
                        console.log("请求失败");
                    });
            }
        }
    });

    function loadScatterChart() {
        Highcharts.chart('scatterChart', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: '学生出勤率统计'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: '周'
                },
                categories: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周', '第八周', '第九周', '第十周']
            },
            yAxis: {
                title: {
                    text: '出勤率(%)'
                }
            },
            series: [{
                name: '学生A',
                data: [[0, 90], [1, 85], [2, 88], [3, 92], [4, 95], [5, 89], [6, 90], [7, 88], [8, 91], [9, 93]]
            }, {
                name: '学生B',
                data: [[0, 80], [1, 83], [2, 85], [3, 87], [4, 90], [5, 86], [6, 84], [7, 85], [8, 88], [9, 89]]
            }],
            accessibility: {
                enabled: false
            }
        });
    }

    function loadLineChart() {
        Highcharts.chart('lineChart', {
            chart: {
                type: 'line'
            },
            title: {
                text: '学生考试成绩趋势'
            },
            xAxis: {
                categories: ['第一次考试', '第二次考试', '第三次考试', '第四次考试', '期中考试', '第六次考试', '第七次考试', '第八次考试', '第九次考试', '期末考试']
            },
            yAxis: {
                title: {
                    text: '分数'
                }
            },
            series: [{
                name: '学生A',
                data: [85, 88, 90, 87, 92, 90, 88, 89, 91, 93]
            }, {
                name: '学生B',
                data: [78, 82, 85, 80, 84, 83, 81, 80, 82, 85]
            }],
            accessibility: {
                enabled: false
            }
        });
    }

    function loadAreaChart() {
        Highcharts.chart('areaChart', {
            chart: {
                type: 'area'
            },
            title: {
                text: '各学期学生总人数'
            },
            xAxis: {
                categories: ['2019年春', '2019年秋', '2020年春', '2020年秋', '2021年春', '2021年秋', '2022年春', '2022年秋', '2023年春', '2023年秋']
            },
            yAxis: {
                title: {
                    text: '人数'
                }
            },
            series: [{
                name: '计算机科学',
                data: [120, 130, 135, 145, 150, 155, 160, 165, 170, 175]
            }, {
                name: '电子工程',
                data: [100, 105, 110, 115, 120, 125, 130, 135, 140, 145]
            }],
            accessibility: {
                enabled: false
            }
        });
    }

    function loadPieChart() {
        Highcharts.chart('pieChart', {
            chart: {
                type: 'pie'
            },
            title: {
                text: '学生成绩分布'
            },
            series: [{
                name: '学生人数',
                colorByPoint: true,
                data: [{
                    name: '优秀(90-100)',
                    y: 40,
                    sliced: true,
                    selected: true
                }, {
                    name: '良好(80-89)',
                    y: 60
                }, {
                    name: '中等(70-79)',
                    y: 80
                }, {
                    name: '及格(60-69)',
                    y: 30
                }, {
                    name: '不及格(60以下)',
                    y: 10
                }]
            }],
            accessibility: {
                enabled: false
            }
        });
    }

    function loadComboChart() {
        Highcharts.chart('comboChart', {
            title: {
                text: '各专业毕业率和就业率'
            },
            xAxis: {
                categories: ['计算机科学', '电子工程', '机械工程', '土木工程', '化学工程']
            },
            yAxis: [{
                title: {
                    text: '毕业率(%)'
                }
            }, {
                title: {
                    text: '就业率(%)',
                    opposite: true
                }
            }],
            series: [{
                type: 'column',
                name: '毕业率',
                data: [95, 90, 85, 88, 92]
            }, {
                type: 'line',
                name: '就业率',
                data: [90, 85, 80, 82, 88],
                yAxis: 1
            }],
            accessibility: {
                enabled: false
            }
        });
    }

    (function () {
        loadScatterChart();
        loadLineChart();
        loadAreaChart();
        loadPieChart();
        loadComboChart();
    })();
</script>

<style>
    .t_main_narrow {
        height: 310px;
        width: 400px;
        margin: 10px;
        border: 1px solid #adadad;
        background-color: #ffffff;
    }

    .t_main_wide {
        height: 310px;
        width: 900px;
        margin: 10px;
        border: 1px solid #adadad;
        background-color: #ffffff;
    }
</style>
</html>
